<template>
	<view>
		<view class="contents">
			<view class="items flex_jc_sb">
				<view class="flex">
					<view class="t1">微信号</view>
					<view class="t2" v-if="data.wechat">
						{{ data.wechat }}
						<text @click="$copyFun(data.wechat)">复制</text>
					</view>
					<view class="t3" v-else>暂无填写</view>
				</view>
				<uni-icons @click="handleInput" type="compose" size="22" color="#75613E"></uni-icons>
			</view>
			<view class="items flex_jc_sb">
				<view class="flex">
					<view class="t1">微信码</view>
					<view class="t2 flex" v-if="data.wechatQr">
						<image :src="data.wechatQr" mode="aspectFill" ></image>
						<text @click="$previewImage([data.wechatQr])">查看</text>
					</view>
					<view class="t3" v-else>暂无上传</view>
				</view>
				<uni-icons @click="handleImg" type="compose" size="22" color="#75613E"></uni-icons>
			</view>
			<view class="items flex_jc_sb">
				<view class="flex">
					<view class="t1">联系</view>
					<view class="t2" v-if="data.phone">
						{{ data.phone }}
						<text @click="$copyFun(data.phone)">复制</text>
					</view>
					<view class="t3" v-else>暂无填写</view>
				</view>
				<uni-icons @click="handleInput1" type="compose" size="22" color="#75613E"></uni-icons>
			</view>
		</view>
		<!-- 修改微信号弹窗 -->
		<uni-popup ref="popupInput" type="center">
			<view class="globalPopup">
				<uni-icons @click="close" type="closeempty" size="20" class="close" color="#AEAEAE"></uni-icons>
				<view class="title">设置微信号</view>
				<view class="input">
					<input v-model="data.wechat" placeholder-class="input_text" type="text" placeholder="请输入新的微信号" />
				</view>
				<view class="btns flex_jc_sb">
					<view class="bt b1" @click="close">取消</view>
					<view class="bt b2" @click="handleConfirm">确认</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupInput1" type="center" >
			<view class="globalPopup">
				<uni-icons @click="close" type="closeempty" size="20" class="close" color="#AEAEAE"></uni-icons>
				<view class="title">设置联系</view>
				<view class="input">
					<input v-model="data.phone" placeholder-class="input_text" type="number" maxlength="11" placeholder="请输入联系" />
				</view>
				<view class="btns flex_jc_sb">
					<view class="bt b1" @click="close">取消</view>
					<view class="bt b2" @click="handleConfirm">确认</view>
				</view>
			</view>
		</uni-popup>
		<!-- 延迟时间弹窗 -->
		<uni-popup ref="popupImg" type="center" >
			<view class="globalPopup">
				<uni-icons @click="close" type="closeempty" size="20" class="close" color="#AEAEAE"></uni-icons>
				<view class="title">设置微信码</view>
				<view class="upload" v-if="data.wechatQr">
					<image :src="data.wechatQr" mode="aspectFill"></image>
					<view class="ads" @click="chooseFENGMIAN">重新上传</view>
				</view>
				<view class="upload flex_jc_cent" v-else @click="chooseFENGMIAN">
					<view class="">
						<uni-icons type="plusempty" size="22" color="#75613E"></uni-icons>
						<view class="">上传个人微信码</view>
					</view>
				</view>
				<view class="btns flex_jc_sb">
					<view class="bt b1" @click="close">取消</view>
					<view class="bt b2" @click="handleConfirm">确认</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick, onMounted } from 'vue';
import buttonGroupVue from '@/components/buttonGroup/buttonGroup.vue';
import { getUserInfo, setUserInfo } from '@/api/branch/userwechat.js';
import { chooseAndUploadImage } from '@/utils/upload';
const instance = getCurrentInstance();
const popupInput = ref(null);
const popupInput1 = ref(null);
const popupImg = ref(null);
const close = () => {
	popupInput.value.close();
	popupInput1.value.close();
	popupImg.value.close();
};
const handleInput = () => {
	popupInput.value.open();
};
const handleInput1 = () => {
	popupInput1.value.open();
};
const handleImg = () => {
	popupImg.value.open();
};

// 上传
const chooseFENGMIAN = async () => {
	try {
		data.wechatQr = await chooseAndUploadImage({
			count: 1,
			uploadText: '上传中...'
		});
	} catch (err) {
		console.error('头像上传失败：', err);
	}
};

const handleConfirm = () => {
	setUserInfo(data).then((res) => {
		if (res.code == 200) {
			uni.showToast({
				title:'已设置',
				icon:'none'
			})
			close();
			getUserInfo().then((res) => {
				if (res.code == 200) {
					Object.assign(data, res.data);
				}
			});
		}
	});
};
const data = reactive({});
onMounted(() => {
	getUserInfo().then((res) => {
		if (res.code == 200) {
			Object.assign(data, res.data);
		}
	});
});
</script>

<style lang="scss" scoped>
.contents {
	.items {
		width: 710rpx;
		height: 80rpx;
		background: #ffffff;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: 20rpx auto;
		padding: 0rpx 20rpx;
		box-sizing: border-box;
		.t1 {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #1b1b1b;
			width: 110rpx;
		}
		.t2 {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #1b1b1b;
			image {
				width: 60rpx;
				height: 60rpx;
			}
			text {
				color: #75613e;
				margin-left: 34rpx;
			}
		}
		.t3 {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #979797;
		}
	}
}

.globalPopup {
	.input {
		width: 100%;
		height: 80rpx;
		background: #ffffff;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		border: 1px solid #dadada;
		margin: 40rpx auto;
		input {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #000;
			padding-left: 20rpx;
			height: 80rpx;
			line-height: 80rpx;
		}
	}
	.upload {
		width: 400rpx;
		height: 400rpx;
		background: #f7f7f7;
		border-radius: 20rpx;
		border: 1px solid #dadada;
		margin: 50rpx auto;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #75613e;
		text-align: center;
		position: relative;
		image {
			width: 400rpx;
			height: 400rpx;
			border-radius: 20rpx;
		}
		.ads {
			position: absolute;
			width: 400rpx;
			height: 80rpx;
			background: rgba(0, 0, 0, 0.5);
			border-radius: 0rpx 0rpx 20rpx 20rpx;
			bottom: 0%;
			line-height: 80rpx;
			color: #ffffff;
		}
	}
}
</style>